<template>
  <div class="startup-container">
    <el-row>
      <el-col :span="24">
        <h2>启动页设置</h2>
      </el-col>
    </el-row>
    <el-row class="mgtop20">
      <el-col>
        <el-form :modal="form" ref="form">
          <el-table
          border
          :data="tableData.items">
          <el-table-column
            label="操作"
            width="100"
            align="center">
              <template slot-scope="item">
                <el-button
                  type="primary"
                  @click="handleEdit(item.row)"
                  size="mini"
                  v-if="form.id !== item.row.id">编辑</el-button>
                <el-button
                  @click="handleCancel"
                  size="mini"
                  v-if="form.id === item.row.id">取消</el-button>
                <el-button
                  type="success"
                  @click="submitEdit(form,item.row)"
                  size="mini"
                  v-if="form.id === item.row.id">保存</el-button>
              </template>
          </el-table-column>
          <el-table-column
            prop="img"
            label="启用页图片"
            align="center">
              <template slot-scope="item">
                <img :src="item.row.img | imgSrc" alt="启动页图片" width="50" />
              </template>
          </el-table-column>
          <el-table-column
            prop="delFlag"
            label="状态"
            align="center">
              <template slot-scope="item">
                <el-form-item label="" prop="delFlag" v-if="form.id === item.row.id">
                  <el-select size="mini" v-model="form.delFlag">
                    <el-option label="有效" :value="0"></el-option>
                    <el-option label="无效" :value="1"></el-option>
                  </el-select>
                </el-form-item>
                <span v-else>{{ +item.row.delFlag ? "无效" : "有效" }}</span>
              </template>
          </el-table-column>
          <el-table-column
            prop="createAt"
            label="创建时间"
            align="center">
              <template slot-scope="item">
                <span>{{ item.row.createAt | format }}</span>
              </template>
          </el-table-column>
        </el-table>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <div class="mgtop20">
          <el-button @click="dialogFormVisible = true" type="primary" size="mini">新增</el-button>
        </div>
      </el-col>
      <el-col :span="20">
        <app-pagination
          :currentPage.sync="tableData.page"
          :size.sync="tableData.size"
          :total="tableData.total"
          @handleCurrentChange="initData"
          @handleSizeChange="initData"></app-pagination>
      </el-col>
    </el-row>
    <add-startup-dialog
      :dialogFormVisible.sync="dialogFormVisible"
      :addUrl="addUrl"
      @upload="initData"
      v-if="dialogFormVisible"></add-startup-dialog>
  </div>
</template>
<script>
  import ApiClient from '@/utils/ApiClient';
  import AppPagination from '@/components/AppPagination';
  import AddStartUpDialog from './AddStartUpDialog';

  export default {
    components:{
      "app-pagination": AppPagination,
      "add-startup-dialog": AddStartUpDialog
    },
    data() {
      return {
        tableData: { // 页面数据
          page: 1,
          size:  10,
          items: null,
          total: null,
          totalPage: null,
        },
        form: { // 单项数据id
          id: null,
          delFlag: null
        },
        dialogFormVisible: false, // 控制新增弹出层显隐
        addUrl: "/backend/homepage/add.do" // 新增操作api
      }
    },
    methods: {
      initData() {
        ApiClient.get("/backend/homepage/list.do",{
          page: this.tableData.page,
          size: this.tableData.size
        }).then( data => {
          data.items = this.sortData(data.items); // 按时间和状态排序
          this.tableData = data;
        });
      },
      sortData(data) {
        if( !Array.isArray(data) )return data; // 如果data不是数组结构直接返回
        let effective = [], // 状态为有效的数据
            invalid = []; // 状态为无效的数据
        data.sort( ( a, b) => b.createAt - a.createAt ).forEach((v) => { +v.delFlag ? invalid.push(v) : effective.push(v) });
        return effective.concat(invalid);
      },
      handleEdit(item) { // 编辑
        this.form.id = item.id;
        this.form.delFlag = item.delFlag;
      },
      handleCancel() { // 取消
        this.form = Object.assign({},{ id: null, delFlag: null });
      },
      submitEdit(form,item) { // 保存
        if(form.delFlag === item.delFlag){ // 解决在点击编辑后,没有改变状态，直接点击保存报异常的问题
          this.handleCancel();
          return;
        }
        let url = +form.delFlag ? `/backend/homepage/${form.id}/hide.do` : `/backend/homepage/${form.id}/show.do`;
        ApiClient.post(url).then( data => {
          this.handleCancel();
          this.initData();
        });
      }
    },
    mounted() {
      this.initData();
    }
  }
</script>
<style lang="scss" scoped>
  .startup-container{
    .mgtop20{
      margin-top: 20px;
    }
    .el-form-item{
      margin-bottom:0;
    }
    td{
      .el-button + .el-button{
        margin-top: 4px;
        margin-left: 0;
      }
    }
  }
</style>
